<style>
    .record-content {
        font-size: 14px;
        color: #1a1a1a;
        padding: 12px 10px;
        border-radius: 5px;
        position: relative;
        width: auto;
        word-wrap: break-word;
        word-break: break-all;
    }
    .record-content .record-img, .record-content img {
        max-height: 200px;
        width: auto;
        height: auto;
        cursor: pointer;
        user-select: none;
        border: 1px solid transparent;
    }
    .record-file {
        height: 50px;
        display: flex;
        align-items: center;
        cursor: pointer;
        user-select: none;
    }
    .record-file img {
        width: 50px !important;
        height: 50px !important;
        padding: 4px;
    }
    .record-file div {
        margin: 6px 0 0 6px;
    }
    .record-file .file-name {
        font-size: 14px;
        font-weight: bold;
        margin: 0;
        color: var(--black);
    }
    .record-file .file-size {
        margin: 0;
        color: var(--gray);
    }
</style>
<form id="edit-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Type')}:</label>
        <div class="col-xs-12 col-sm-8">
                        
            <select  id="c-type" data-rule="required" class="form-control selectpicker" name="row[type]">
                {foreach name="typeList" item="vo"}
                    <option value="{$key}" {in name="key" value="$row.type"}selected{/in}>{$vo}</option>
                {/foreach}
            </select>

        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Group_id')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-group_id" min="0" data-source="fastim/groupchat/index" data-field="nickname" class="form-control selectpage" name="row[group_id]" type="text" value="{$row.group_id|htmlentities}">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Session_id')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-session_id" data-rule="required" min="0" class="form-control" name="row[session_id]" type="number" value="{$row.session_id|htmlentities}">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Sender_id')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-sender_id" min="0" data-source="fastim/user/loaduser" data-field="nickname" class="form-control selectpage" name="row[sender_id]" type="text" value="{$row.sender_id|htmlentities}">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Recipient_id')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-recipient_id" min="0" data-source="fastim/user/loaduser" data-field="nickname" class="form-control selectpage" name="row[recipient_id]" type="text" value="{$row.recipient_id|htmlentities}">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Message')}:</label>
        <div class="col-xs-12 col-sm-8">
            <textarea id="c-message" class="form-control" rows="5" name="row[message]" cols="50">{$row.message}</textarea>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('FormatMessage')}:</label>
        <div class="col-xs-12 col-sm-8">
            <div class="record-content">
            {switch $row.type}
                {case default}
                {$row.format_message}
                {/case}
                {case image}
                <img draggable="false" class="record-img" src="{$row.format_message}" />
                {/case}
                {case audio}
                <audio src="{$row.format_message}" controls>您的浏览器不支持播放音频文件。</audio>
                {/case}
                {case video}
                <video src="{$row.format_message}" width="320" height="240" controls>您的浏览器不支持播放视频。</video>
                {/case}
                {case file}
                <a href="{$row.format_message.url}">
                    <div class="record-file">
                        <img src="/addons/fastim/index/icon/suffix/{$row.format_message.suffix}" alt="{$row.format_message.suffix}文件" />
                        <div>
                            <p class="file-name">{$row.format_message.suffix}文件</p>
                            <p class="file-size">{$row.format_message.size}</p>
                        </div>
                        <div class="down-file">
                            <button class="im-button">下载</button>
                        </div>
                    </div>
                </a>
                {/case}
                {case link}
                <a class="record-a" target="_blank" href="{$row.format_message.link_url}">{$row.format_message.link_name ? $row.format_message.link_name:$row.format_message.link_url}</a>
                <p class="record-a-p">网址为：{$row.format_message.link_url} 请注意您的账户和财产安全！</p>
                {/case}
                {case system}
                <p>{$row.format_message.message}</p>
                {$row.format_message.display_user == 'all' && $row.group_id > 0 ? '<b>接受人为所有群成员</b>':''}
                {/case}
                {case group_apply}
                <p>验证消息：{$row.format_message.note}</p>
                {/case}
                {case group_notice}
                {$row.format_message.message}
                {/case}
                {case group_invitation}
                {$row.format_message.message}
                {/case}
                {case friend_apply}
                <p>验证消息：{$row.format_message.note}</p>
                {/case}
                {case kbs_list}
                {$row.format_message.title}
                {/case}
                {case group_chat_notice}
                {$row.format_message.content}
                {/case}
                {case voice}
                <audio src="{$row.format_message.url}" controls>您的浏览器不支持播放音频文件。</audio>
                {/case}
            {/switch}
            </div>
        </div>
    </div>
    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="submit" class="btn btn-success btn-embossed disabled">{:__('OK')}</button>
            <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
        </div>
    </div>
</form>
